<template>
    <view class="sign flex_b">
        <view class="s_left">
            <view class="day">已签到<text style="font-size: 56rpx;margin: 0 12rpx;">{{ signDay }}</text>天</view>
            <view class="button flex_c" @click="handlerSign">{{ isSign ? '已签到' : '签到' }}</view>
        </view>
        <view class="s_right">
            <image
                src="https://www.banbanhuo.com/minio/banbanhuo/354b00fa066c0bbaddfd95dc6bb79cd2fb2178574f6c946e3248013594cfa283.png">
            </image>
        </view>
    </view>
</template>

<script setup lang="ts">
const emit = defineEmits(['sign'])
defineProps({
    isSign: {
        type: Boolean,
        default: false
    },
    signDay: {
        type: Number,
        default: 0
    }
})
const handlerSign = () => {
    emit('sign')
}
</script>

<style lang="scss" scoped>
.sign {
    width: 750rpx;
    height: 300rpx;
    background-image: url("https://www.banbanhuo.com/minio/banbanhuo/a91969a0bd84b7a20e4e96e77a6788db275efb2b978b795f1b8d235af7307ff8.png");
    background-size: 750rpx 300rpx;
}

.s_left {
    margin-left: 46rpx;

    .day {
        font-weight: 700;
        font-size: 32rpx;
        color: #222222;
        margin-left: 8rpx;
        display: flex;
        align-items: baseline;
    }

    .button {
        width: 224rpx;
        height: 70rpx;
        color: #fff;
        font-size: 32rpx;
        font-weight: 700;
        background: linear-gradient(90deg, #FB591D 0%, #FD9B59 50%, #FC6223 100%);
        box-shadow: 0px 4px 4px 0px #FD851E inset;
        border-radius: 35rpx;
        margin-top: 32rpx;
    }
}

.s_right {
    margin-right: 56rpx;

    image {
        width: 350rpx;
        height: 262rpx;
    }
}
</style>